<div class="box">
  <form ng-submit="topicSearch(searchTerm)" class="flex-box-container-row">
    <input id="search-term" type="text" ng-model="searchTerm" placeholder="{{'INTERESTED_IN'|i18n}}"><div id="spinner" style="margin-left: 30px" ></div>
  </form>
  <div ng-show="topicResults">
    <div class="result-heading">{{'TOPICS'|i18n}}</div>
	<ul id="topic-results">
      <li ng-repeat="topicResult in topicResults" ng-click="topicClicked(topicResult.mid, topicResult.name)" ng-style="topicResult.style">
		<img ng-src="https://usercontent.googleapis.com/freebase/v1/image{{topicResult.mid}}?key={{topicResult.key}}&fallbackid=/m/05g{{topicResult.maxheight}}" align="middle"  style="padding:3px;"/>
		{{topicResult.name}}
	  </li>
    </ul>
  </div>
</div>

<div ng-show="channelResults" class="box">
  <div class="result-heading">{{'CHANNELS'|i18n}}</div>
  <div class="flex-box-container-row">
    <div ng-repeat="channelResult in channelResults" class="result-container">
      <div class="player-container">
        <img ng-click="listPlayerClicked($event.target, channelResult.id)" ng-src="{{channelResult.thumbnailUrl}}" class="thumbnail-image">
        <div class="title"><a ng-href="{{channelResult.href}}" target="_blank">{{channelResult.title}}</a></div>
      </div>
      <div ng-show="channelId" class="button-container">
        <button ng-click="subscribeClicked($event.target, channelResult.id)">{{'SUBSCRIBE'|i18n}}</button>
      </div>
    </div>
  </div>
</div>

<div ng-show="playlistResults" class="box">
  <div class="result-heading">{{'PLAYLISTS'|i18n}}</div>
  <div class="flex-box-container-row">
    <div ng-repeat="playlistResult in playlistResults" class="result-container">
      <div class="player-container">
        <img ng-click="listPlayerClicked($event.target, playlistResult.id)" ng-src="{{playlistResult.thumbnailUrl}}" class="thumbnail-image">
        <div class="title"><a ng-href="{{playlistResult.href}}" target="_blank">{{playlistResult.title}}</a></div>
      </div>
    </div>
  </div>
</div>

<div ng-show="videoResults" class="box">
  <div class="result-heading">{{'VIDEOS'|i18n}}</div>
  <div class="flex-box-container-row">
    <div ng-repeat="videoResult in videoResults" class="result-container">
      <div class="player-container">
        <img ng-click="videoClicked($event.target, videoResult.id)" ng-src="{{videoResult.thumbnailUrl}}" class="thumbnail-image">
        <div class="title"><a ng-href="{{videoResult.href}}" target="_blank">{{videoResult.title}}</a></div>
      </div>
      <div ng-show="channelId" class="button-container">
        <button ng-click="addToList($event.target, 'likes', videoResult.id)">{{'LIKE'|i18n}}</button>
        <button ng-click="addToList($event.target, 'favorites', videoResult.id)">{{'FAVORITE'|i18n}}</button>
        <button ng-click="addToList($event.target, 'watchLater', videoResult.id)">{{'WATCH_LATER'|i18n}}</button>
      </div>
    </div>
  </div>
</div>